<template>
  <!-- 获取焦点添加=》类名=》focused 
  作用：在获取焦点后，添加focused类名，让搜索区域盖住下边页面
  -->
  <view class="search" :class="{ focused: isShow }">
    <!-- 1. 搜索输入框 -->
    <view class="sinput">
      <input
        v-model="keyword"
        @input="getSuggest"
        @focus="showContent"
        @confirm="goResult"
        type="text"
        placeholder="搜索"
      />
      <button @click="hideContent">取消</button>
    </view>
    <!-- 2. 搜索框获取焦点=》显示下边内容 -->
    <view class="scontent" v-show="isShow">
      <!-- 搜索建议商品没有数据显示：搜索历史 -->
      <block v-if="suggestList.length === 0">
        <div class="title">
          搜索历史
          <span @click="delHistory" class="clear"></span>
        </div>
        <!-- 搜索历史 -->
        <div class="history">
          <navigator
            v-for="item in historyList"
            :key="item"
            :url="`/packone/list/index?query=${item}`"
            >{{ item }}</navigator
          >
        </div>
      </block>
      <!-- 搜索建议商品 -->
      <scroll-view v-else scroll-y class="result">
        <navigator
          v-for="item in suggestList"
          :key="item.goods_id"
          :url="'/packone/goods/index?id=' + item.goods_id"
          >{{ item.goods_name }}</navigator
        >
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      // 搜索弹出层是否显示
      isShow: false,
      // 搜索输入的关键词
      keyword: '',
      // 关键词查询的商品列表
      suggestList: [],
      // 搜索历史记录：[搜索关键词1， 搜索关键词2...]
      historyList: uni.getStorageSync('historyList') || []
    }
  },
  methods: {
    // 清空历史记录
    delHistory () {
      this.historyList = []
      uni.removeStorageSync('historyList');
    },
    // 跳转搜索结果
    goResult () {
      // 存储搜索历史记录
      if (!this.historyList.some(item => item === this.keyword)) {
        // 没有重复
        this.historyList.push(this.keyword)
        uni.setStorageSync('historyList', this.historyList)
      }

      uni.navigateTo({
        url: `/packone/list/index?query=${this.keyword}`
      });
    },
    // 输入期间会执行
    getSuggest () {
      // 总结=》函数防抖：在延迟时间内，每次有重复的定时器任务，在下次输入时被清除，直到用户输入完，执行最后一个定时器任务
      this.timerId && clearTimeout(this.timerId)
      // 存储定时器ID
      this.timerId = setTimeout(async () => {
        if (!this.keyword) {
          // 如果搜索关键词不存在，阻止代码向下执行并清空之前的搜索结果
          return this.suggestList = []
        }
        // console.log('输入的关键词：', this.keyword)
        const { data } = await this.request({
          url: '/api/public/v1/goods/qsearch',
          data: {
            query: this.keyword
          }
        })
        console.log('根据输入的关键词查询的建议商品列表：', data)
        this.suggestList = data
      }, 800);
    },
    // 输入框获取焦点显示下边内容
    showContent () {
      this.isShow = true
      // 1. getSystemInfoSync()获取系统信息，拿到屏幕可视高度
      const sys = uni.getSystemInfoSync()
      console.log('系统信息：', sys.windowHeight)
      // 2. 把这个计算获取的高度传给父组件=》子传父
      this.$emit('search', sys.windowHeight + 'px')
      // 隐藏tabbar菜单
      uni.hideTabBar()
    },
    // 点击隐藏
    hideContent () {
      this.isShow = false
      // 显示tabbar菜单
      uni.showTabBar()
      // 让首页可以滚动
      this.$emit('search', 'auto')
    }
  },
}
</script>

<style lang="scss" scoped>
// 搜索
.search {
  display: flex;
  flex-direction: column;
  .sinput {
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    background: #ff2d4a;
    position: relative;
    //伪元素
    &::after {
      position: absolute;
      top: 28rpx;
      left: 302rpx;
      content: "";
      width: 44rpx;
      height: 44rpx;
      line-height: 1;
      background-image: url(https://static.botue.com/ugo/images/icon_search%402x.png);
      background-size: 32rpx;
      background-position: 6rpx center;
      background-repeat: no-repeat;
    }
    input {
      background: #fff;
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      color: #bbb;
      border-radius: 5rpx;
    }
    button {
      display: none;
      margin-left: 20rpx;
      width: 150rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      border-radius: 5rpx;
      background: transparent;
      color: #666;
    }
  }
  &.focused {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    .sinput {
      display: flex;
      background: #eee;
      input {
        text-align: left;
        padding-left: 60rpx;
      }
      button {
        display: block;
      }
      &::after {
        left: 30rpx;
      }
    }
  }
  .scontent {
    background: #fff;
    position: relative;

    flex: 1;
    padding: 27rpx;
    .title {
      font-size: 27rpx;
      line-height: 1;
      color: #333;
    }
    .clear {
      display: block;
      width: 27rpx;
      height: 27rpx;
      float: right;
      background-image: url(http://static.botue.com/ugo/images/clear.png);
      background-size: cover;
    }

    .history {
      padding-top: 30rpx;
      navigator {
        display: inline-block;
        line-height: 1;
        padding: 15rpx 20rpx 12rpx;
        background-color: #ddd;
        font-size: 24rpx;
        margin-right: 20rpx;
        margin-bottom: 15rpx;
        color: #333;
      }
    }

    .result {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;
      navigator {
        line-height: 1;
        padding: 20rpx 30rpx;
        font-size: 24rpx;
        color: #666;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>